<template>
    <el-menu :default-active="router.currentRoute.value.path"  
        class="my-menu el-menu-vertical-demo" :collapse-transition="false" 
        :collapse="props.collapseState" :router="true">
        <MenuTree :menuList="store.menubar.menuList" :collapse="props.collapseState"/>
    </el-menu>
</template>
  
<script lang="ts" setup>
import {useLayoutStore} from '@/store/modules/layout'
import router from '@/router'
import {IconsNameHash} from '@/main'
import MenuTree from './MenuTree.vue';

const store = useLayoutStore()

// @ts-ignore
let props = defineProps(['collapseState'])
let emits = defineEmits(['emit-select-menu'])


const judgeIconExists = (iconName) => {
    return IconsNameHash[iconName] !== undefined
}

</script>
  
<style scoped>
.my-menu {
    height: 100vh;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100vh;
    animation: show 0.2s linear !important;
}

.el-menu--collapse {
    width: 65px;
    height: 100vh;
    animation: hide 0.2s linear !important;
}


@keyframes hide {
    from {
        width: 200px;
    }

    to {
        width: 65px;
    }
}

@keyframes show {
    from {
        width: 65px;
    }

    to {
        width: 200px;
    }
}
</style>